<template>
    <div class="appointment-overview">
		<!-- 标题 -->
		<div class="a-o-tit">预约概览</div>
        <!-- 时间选择 -->
        <div class="time-box">
            <div class="block t-box">
				<div>
					<span class="demonstration time-lb-txt">日期范围: </span>
					<span class="demonstration time-lb-txt" 
						:class="{'time-lb-select':timeType == 1}" @click="selectTime(1)">按日</span>
					<span class="demonstration time-lb-txt" 
						:class="{'time-lb-select':timeType == 2}" @click="selectTime(2)">按周</span>
					<span class="demonstration time-lb-txt" 
						:class="{'time-lb-select':timeType == 3}" @click="selectTime(3)">按月</span>
				</div>
                <el-date-picker v-if="timeType == 1"
                    v-model="dateValue"
                    type="date"
				    :picker-options="{ firstDayOfWeek: 1 }"
					:start-placeholder="wSearch.stime"
					:end-placeholder="wSearch.dtime"
                    placeholder="选择日期">
                </el-date-picker>
				<div class="w-d-p-box" v-if="timeType == 2" >
					 <el-date-picker class="w-d-p" 
						  v-model="weekValue"
						  type="week"
						  :picker-options="{ firstDayOfWeek: 1 }"
						  placeholder="选择周">
					</el-date-picker>
					<div class="show-week" :class="{'show-week-null':!weekIsNull}">{{weekStr}}</div>
				</div>
				<el-date-picker v-if="timeType == 3"
				    v-model="monthValue"
				    type="month"
				    placeholder="选择月份">
				</el-date-picker>
				<div class="cur-time" @click="clickCurTimeBtn">{{timeType == 1?'今日':''}}{{timeType == 2?'本周':''}}{{timeType == 3?'本月':''}}</div>
				      <!-- v-model="weekValue" -->
            </div>
			<div class="block flag-g">
				<!-- <div class="f-r-t">
					<div class="rect rect-blue"></div>
					<span class="txt txt-b">待确认</span>
				</div> -->
				<div class="f-r-t">
					<div class="rect txt-dfw" ></div>
					<span class="txt ">待服务</span>
				</div>
				<div class="f-r-t">
					<div class="rect txt-c"></div>
					<span class="txt ">已完成</span>
				</div>
				<div class="f-r-t" v-if="timeType != 3">
					<div class="rect txt-kx"></div>
					<span class="txt ">空闲</span>
				</div>
				<div class="f-r-t" v-if="timeType != 3">
					<div class="rect txt-xx"></div>
					<span class="txt ">休息</span>
				</div>
			</div>	 
        </div>

        <!-- 列表 -->
		<div v-if="timeType == 1" class="comm-list-scroll-box">
			<div class="a-l-box comm-list-scroll "
			    style="height: calc(100vh - 150px)"
			    v-if="dutyHourList && dutyHourList.length > 0">
				<div class="soll-box comm-list">
					<div class="list-box">
			        	<div class="d-t-box"
			        	    v-for="(item, index) in dutyHourList"
			        	    :key="index">
			        	    <div class="item w-item"
			        	        v-for="(items, idx) in item"
			        	        :key="idx"
			        	        @click="clickItem(items)">
								<div class="line" v-if="index == 0 && idx == 0"></div>
								<div class="f-t-s-txt" v-if="index == 0 && idx == 0">
									<span class="t-txt">时间</span>
									<span class="s-txt">服务人</span>
								</div>
								<div v-if="index == 0 && idx != 0">{{ items.title }}</div>

								<div v-if="index != 0 && idx == 0">
									<el-dropdown class="el-drop-box" @command="menuAct">
										<div class="el-dropdown-link">
											<div class="el-drop-txt">{{items.title}}</div>
										</div>
										<el-dropdown-menu slot="dropdown">
											<el-dropdown-item :command="{items:items,index:index,act:1}">编辑排班</el-dropdown-item>
											<el-dropdown-item :command="{items:items,index:index,act:2}">更换服务人</el-dropdown-item>
											<el-dropdown-item :command="{items:items,index:index,act:3}">移除服务人</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown>
								</div>

								<div class="d-work-box" v-if="index != 0 && idx != 0 && items.isFill">
									<el-dropdown class="el-drop-box-d" @command="menuAct">
										<div class="el-dropdown-link">
											<div class="el-drop-txt item-s-b" :class="items.status != '1' ? items.status == '2' ? 'item-s-g-dfw' : 'item-s-g' : '' ">{{items.title}}</div>
										</div>
										<el-dropdown-menu slot="dropdown">
											<el-dropdown-item v-if="items.color == 'blue'" :command="{items:items,index:index,act:4}">取消预约</el-dropdown-item>
											<el-dropdown-item :command="{items:items,index:index,act:5}">客户信息</el-dropdown-item>
											<el-dropdown-item :command="{items:items,index:index,act:6}">客户开单</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown>
								</div>
								<!-- 空白地方 -->
								<div class="d-work-box" v-if="index != 0 && idx != 0 && !items.isFill">
									<el-dropdown class="el-drop-box-d" @command="menuAct">
										<div class="el-dropdown-link">
											<div class="el-drop-txt" :class=" items.cancel_act == 1 ? 'el-drop-txt-min-w' : 'el-drop-txt-rest'">{{items.title}}</div>
										</div>
										<el-dropdown-menu slot="dropdown">
											<el-dropdown-item v-if="items.cancel_act == 1" :command="{items:items,index:index,act:7}">安排休息</el-dropdown-item>
											<el-dropdown-item v-else-if="items.cancel_act == 3" :command="{items:items,index:index,act:1}">编辑排班</el-dropdown-item>
											<el-dropdown-item v-else :command="{items:items,index:index,act:8}">取消休息</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown>
								</div>
			        	    </div>
			        	</div>
			    	</div>
				<div class="more-btn" @click="loadMoreDate">加载更多 >></div>

				</div>
			</div>
			<empty v-else />
		</div>
		
		<div v-if="timeType == 2">
			<div class="a-l-box comm-list-scroll"
				style="height: calc(100vh - 150px)"
			    v-if="weekDutyList && weekDutyList.length > 0">
				<div class="list-box">
					<div class="d-t-box"
					    v-for="(item, index) in weekDutyList"
					    :key="index">
						<div class="tb-item"  v-for="(its, idx) in item">
							<div class="line" v-if="index == 0 && idx == 0"></div>
							<div class="f-t-s-txt" v-if="index == 0 && idx == 0">
								<span class="t-txt">时间</span>
								<span class="s-txt">服务人</span>
							</div>
							<div v-if="index == 0 && idx != 0">{{its.title}}</div>
							
							<div v-if="index != 0 && idx == 0" @click="clickItem(its)">
								<el-dropdown class="el-drop-box" @command="menuAct">
									<div class="el-dropdown-link">
										<div class="el-drop-txt">{{its.title}}</div>
									</div>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item :command="{items:its,index:index,act:1}">编辑排班</el-dropdown-item>
										<el-dropdown-item :command="{items:its,index:index,act:2}">更换服务人</el-dropdown-item>
										<el-dropdown-item :command="{items:its,index:index,act:3}">移除服务人</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</div> 
							
							<div class="d-work-box" v-if="index != 0 && idx != 0 && !its.isFill" @click="clickItem(its)">
								<el-dropdown class="el-drop-box-d" @command="menuAct">
									<div class="el-dropdown-link">
										<div class="el-drop-txt f-text-center" :class=" its.is_rest != 1 ? 'el-drop-txt-min-w' : 'el-drop-txt-rest'">{{its.title}}</div>
									</div>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item v-if="its.is_rest != 1" :command="{items:its,index:index,act:7}">安排休息</el-dropdown-item>
										<el-dropdown-item v-else :command="{items:its,index:index,act:1}">编辑排班</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</div> 
							
							<div class="ls-item-el" v-for="(temp,i) in its.ls" :key="i" @click="clickItem(temp,true)">
								<el-dropdown class="el-drop-box" @command="menuAct">
									<div class="el-dropdown-link">
										<div class="el-drop-txt el-drop-txt-p" :class="temp.status != '1' ? temp.status == '2' ? 'item-s-g-dfw' : 'item-s-g' : '' ">{{temp.hour_time + " "}}{{temp.title}}</div>
									</div>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item :command="{items:temp,index:index,idx:idx,act:4}" v-if="temp.status!='4'">取消预约</el-dropdown-item>
										<el-dropdown-item :command="{items:temp,index:index,act:5}">客户信息</el-dropdown-item>
										<el-dropdown-item :command="{items:temp,index:index,act:6}">客户开单</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</div>
						</div>
					</div>
				</div>
			</div>
			<empty v-else />
		</div>	
		
        <div v-if="timeType == 3">
			<div class="a-l-box comm-list-scroll"
				style="height: calc(100vh - 150px)"
			    v-if="monDutyList && monDutyList.length > 0">
				<div class="list-box">
					<div class="d-t-box"
					    v-for="(item, index) in monDutyList"
					    :key="index">
						<div class="m-tb-item" v-for="(its, idx) in item">
							<div v-if="index == 0">{{its.title}}</div>
							<div class="date-txt-box" v-else>
								<div class="date-txt">{{its.title}}</div>
								<div class="ls-box" v-for="(temp,i) in its.ls" :key="i" v-show="temp.hour_time || temp.title" @click="clickItem(temp,true)">
									<el-dropdown class="el-drop-box" @command="menuAct">
										<div class="el-dropdown-link">
											<div class="el-drop-txt" :class="temp.status != '1' ? temp.status == '2' ? 'item-s-g-dfw' : 'item-s-g' : '' ">{{temp.hour_time + " "}}{{temp.title}}</div>
										</div>
										<el-dropdown-menu slot="dropdown">
											<el-dropdown-item :command="{items:temp,index:index,idx:idx,act:4}" v-if="temp.status!='4'">取消预约</el-dropdown-item>
											<el-dropdown-item :command="{items:temp,index:index,act:5}">客户信息</el-dropdown-item>
											<el-dropdown-item :command="{items:temp,index:index,act:6}">客户开单</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown>
								</div>
							</div>
						</div>
					</div>	
				</div>	
			</div>
			<empty v-else />
		</div>	
		
		 <!-- 选择服务 -->
		<popServiceSelect
		    :page_i="page_i"
		    ref="popServiceSelect">
		</popServiceSelect>
		
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";
import empty from "../comm/empty.vue";
import popServiceSelect from "./popServiceSelect.vue";
import util from "@/js/util/Util.js";

const PAGE_SIZE = 20;
export default {
    name: "appointmentOverview",
    components: { empty,popServiceSelect },
    data() {
        return {
			page_i:4,
			
			timeType:1,//1：按日，2：按周，3：按月
			
            dateValue: "",
            pageNo: 0,
            search: {
                search_kw: "", //搜索关索词
                search_type: 1, //搜索类型1: 客户， 2：服务
                timestr: "", //日期，210309
                pfrom: 0, //分页记录开始数
                pnum: 20, //分页大小
            },
            isInit: false,
            hourList: [], //排班时间列表
            dateList: [], //日期列表
            dutyHourList: [], //天渲染概览列表
            tLong: 0, //服务预约服务时间长度

            mouseTime: 0,
            // mouseDownUpInvter: 0,
			
			
			weekValue:"",
			weekStr:"",//显示时间段
			weekIsNull:true,//
			weekList:[],//周天渲染概览列表
			weekDutyList:[],
			wSearch: {
			    search_kw: "", //搜索关索词
			    search_type: 1, //搜索类型1: 客户， 2：服务
			    stime: "", //周开始时间,2022-8-01
				dtime:"",//周结束时间,2022-8-07
			    pfrom: 0, //分页记录开始数
			    pnum: 20, //分页大小
			},
			
		    monthValue:"",
			monDutyList:[],
			mSearch: {
			    search_kw: "", //搜索关索词
			    search_type: 1, //搜索类型1: 客户， 2：服务
			    stime: "", //月份,2022-07
			    pfrom: 0, //分页记录开始数
			    pnum: 20, //分页大小
			},
        };
    },

    watch: {
        dateValue(value) {
            if (this.isInit) {
                this.isInit = false;
                return;
            }
            let ymd = this.formatDateStr(value);
            this.changeDateGetBLs(ymd);
        },
		
		weekValue(value)
		{
			if(!value)
			{
				this.weekStr = "请选择周";
				this.weekIsNull = false;
			}
			else
			{
				this.weekIsNull = true;
				this.formatWeekStr(value);
			}
		},
		
		monthValue(value)
		{
			this.formatMonthStr(value);
		},
    },

    methods: {
		selectTime(value)
		{
			this.timeType = value;
			if(this.timeType == 1)
			{
				
				this.dateValue = new Date();
			}
			else if(this.timeType == 2)
			{
				this.formatWeekStr(new Date());
			}
			else if(this.timeType == 3)
			{
				this.monthValue = new Date();
			}
		},
		
		clickCurTimeBtn()
		{
			if(this.timeType == 1)
			{
				
				this.dateValue = new Date();
			}
			else if(this.timeType == 2)
			{
				this.formatWeekStr(new Date());
			}
			else if(this.timeType == 3)
			{
				this.monthValue = new Date();
			}
		},
		
		/****计算周时间格式*****/
		formatWeekStr(value)
		{
			console.log(value);
			let d = new Date(value);
			let t1 = d.getTime() - 3600 * 24 * 1000 * (d.getDay() - 1);
			let t2 = d.getTime() + 3600 * 24 * 1000 * (7 - d.getDay()) ;
			if(d.getDay() == 0) //初始化当天是星期日
			{
				t1 = d.getTime() - 3600 * 24 * 1000 * (6 - d.getDay());
				t2 = d.getTime();
			}
			let st = new Date(t1);
			let et = new Date(t2);
			this.wSearch.stime = st.getFullYear() + "-" + ((st.getMonth() + 1) > 9 ? (st.getMonth() + 1) : "0" + (st.getMonth() + 1) ) + "-" + (st.getDate()>9 ? st.getDate() : "0" + st.getDate());
			this.wSearch.dtime = et.getFullYear() + "-" + ((et.getMonth() + 1) > 9 ? (et.getMonth() + 1) : "0" + (et.getMonth() + 1) ) + "-" + (et.getDate()>9 ? et.getDate() : "0" + et.getDate()) ;
			this.weekStr = this.wSearch.stime + " 至 " + this.wSearch.dtime;
			this.wSearch.pfrom = 0;
			this.getWeekYyBookFormList();
		},
		
		/***计算月时间格式******/
		formatMonthStr(value)
		{
			this.mSearch.stime = value.getFullYear() + "-" + ((value.getMonth() + 1) > 9 ? (value.getMonth() + 1) : "0" + (value.getMonth() + 1) );
			this.mSearch.pfrom = 0;
			this.getMonthYyBookFormList();
		},
		
        butFun(type) {
            this.$emit("butFun", type);
        },

		//计算日期格式
        formatDateStr(value) {
            // this.search.timestr = String(value.getFullYear()).substr(2,2) + String(value.getMonth() + 1) + String(value.getDate());
            let y = String(value.getFullYear()).substr(2, 2);
            let m =
                value.getMonth() + 1 < 10
                    ? "0" + (value.getMonth() + 1)
                    : String(value.getMonth() + 1);
            let d =
                value.getDate() < 10
                    ? "0" + value.getDate()
                    : String(value.getDate());
            let ymd = y + m + d;
            return ymd;
        },
		
        /****获取数据****/
        getData() {
            this.isInit = true;
            this.dateValue = new Date();
            this.dutyHourList = [];
            this.pageNo = 0;
            this.search.pfrom = 0;
            this.getBookFormTmerStr();
        },

        //预约 - 预约表格时间
        async getBookFormTmerStr(type) {
            let url = config.YY0_BOOK_FORM_TIMESTR;
            let param = {};
            param.page = 1; //分页： 取值1，2, 3, 4..., 默认为第1页
            param.type = "pre"; //时间类型，pre 或 aft，pre：向前翻页，aft：向后翻页，每页取31天的记录
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1) {
                if (!res.data) return;
                res = res.data;
                if (res.timestr_ls) {
                    this.search.timestr = res.timestr_ls[0].timestr;
                }

                if (res.hour_ls) {
                    let hourList = res.hour_ls;
                    this.hourList = hourList;
                    this.getBookFormList(hourList);
                }

                if (res.timestr_ls) {
                    this.dateList = res.timestr_ls;
                }
            }
        },

        //更改时间加载数据
        changeDateGetBLs(ymd) {
            this.dutyHourList = [];
            this.search.timestr = ymd;
            this.pageNo = 0;
            this.search.pfrom = this.pageNo * this.search.pnum;
            this.getBookFormList(this.hourList);
        },

        //预约 - 预约表格列表
        async getBookFormList(hourList) {
            let url = config.YY0_BOOK_FORM_LS;
            let param = this.search;

            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1) {
                if (!res.data) return;
                res = res.data;
                let dutyList = [];
                if (this.pageNo == 0) {
                    //初始时间表头
                    let obj = {};
                    obj.duty_id = -1;
                    obj.name = "  ";
                    dutyList.push(obj);
                }

                if (res.ls) {
                    dutyList = dutyList.concat(res.ls);
                    this.initData(dutyList, hourList);
                    this.pageNo++;
                }
                this.tLong = Number(res.tlong);
            }
        },

        /****表格数据****/
        initData(dLs, hLs) {
            let dLen = dLs.length;
            let hLen = hLs.length;

            for (let i = 0; i < dLen; i++) {
                let dTemp = dLs[i];
                let tempArr = [];
                if (dTemp.duty_id == -1) {
					tempArr.push({}); //空格
                    for (
                        let j = 0;
                        j < hLen;
                        j++ //顶部表头（时间）
                    ) {
                        let hTemp = hLs[j];
                        let obj = {};
                        obj.title = hTemp.hour_time;
                        tempArr.push(obj);
                    }
                } else {
                    let jsObj = {}; //技师名称
                    jsObj.duty_id = dTemp.duty_id;
                    jsObj.title = dTemp.name;
                    jsObj.name = dTemp.name;
                    jsObj.staffid = dTemp.staffid;
                    jsObj.cellphone = dTemp.cellphone;
                    jsObj.position_title = dTemp.position_title;
                    jsObj.avatar = dTemp.avatar;

                    jsObj.isStaffid = true;
                    jsObj.isFill = false;
                    tempArr.push(jsObj);
                    for (let j = 0; j < hLen; j++) {
                        let hTemp = hLs[j];
                        let obj = {};
                        obj.duty_id = dTemp.duty_id;

                        obj.name = dTemp.name;
                        obj.position_title = dTemp.position_title;
                        obj.cellphone = dTemp.cellphone;
                        obj.staffid = dTemp.staffid;
                        obj.avatar = dTemp.avatar;

                        obj.isStaffid = false;
                        let t = String(hTemp.hour).replace(".", "_"); //"hour_8_00"
                        let key = "hour_" + t;
                        let cankey = "cancel_" + t;
                        obj.cancel_act = dTemp[cankey];
                        obj.tlong = this.tLong;
                        if (dTemp[key] && dTemp[key][0]) {
                            //已经预约的服务，技师，时间，
                            obj.title = dTemp[key][0].title;
                            obj.bookid = dTemp[key][0].bookid;
                            obj.h_from = dTemp[key][0].h_from;
                            obj.h_to = dTemp[key][0].h_to;
                            obj.hour_time = dTemp[key][0].hour_time;
                            obj.color = dTemp[key][0].color; //:"blue","gray" 填充颜色
                            obj.customer_info = dTemp[key][0].customer_info;
							obj.status = dTemp[key][0].status;
                            obj.isFill = true;
                        } //未预约的时间,技师
                        else {
                            obj.title = "空闲";
                            if (obj.cancel_act == 2 || obj.cancel_act == 3) {
                                obj.title = "休息";
                            }
                            obj.h_from = hTemp.hour;
                            obj.h_to = hTemp.hour_to;
                            obj.hour_time = hTemp.hour_time;
                            obj.isFill = false;
                        }
                        tempArr.push(obj);
                    }
                }
				
                this.dutyHourList.push(tempArr);
            }
        },
		
		/******按周加载数据******/
		async getWeekYyBookFormList()
		{
			this.weekDutyList = [];
			let url = config.YY0_YUYUE_BOOK_FORM_LS_W;
			let param = this.wSearch;
			let res = await this.$api({ url: url, data: param });
			if (!res) return;
			if(res.status == 1) {
				if(!res.data)return;
				res = res.data;
				if(res.ls)
				{
					let arr = [];
					let d = new Date(this.wSearch.stime);
					let tempArr = [];
					if(this.wSearch.pfrom == 0)
					{
						let temp = {};
						arr.push(temp);
						for(let i = 0; i<7; i++)
						{
							let t = new Date(d.getTime() + i * 3600 * 24 * 1000);
							let w = util.getWeekDay(t);
							w = w + " " + (((t.getMonth() + 1) < 10 ? ("0" + (t.getMonth() + 1)) : (t.getMonth() + 1))  + "-" + (t.getDate() < 10 ? ("0" + t.getDate()) : t.getDate()));
							let obj = {};
							obj.title = w;
							arr.push(obj);
						}
						tempArr.push(arr);
					}
					let len = res.ls.length;
					
					for(let i = 0 ; i < len; i++)
					{
						let ary = [];
						let temp = res.ls[i];
						let sObj = {};
						sObj.avatar = temp.avatar;
						sObj.cellphone = temp.cellphone;
						sObj.name = temp.name;
						sObj.position_title = temp.position_title;
						sObj.staffid = temp.staffid;
						sObj.title = temp.name;
						sObj.isStaffid = true;
						ary.push(sObj);
						if(temp.timelist && temp.timelist.length > 0)
						{
							for(let j = temp.timelist.length - 1; j >= 0; j--)
							{
								let tO = temp.timelist[j];
								let obj = {};
								obj.is_rest = tO.is_rest;
								obj.timestr = tO.timestr;
								obj.staffid = temp.staffid;
								obj.avatar = temp.avatar;
								obj.cellphone = temp.cellphone;
								obj.name = temp.name;
								obj.position_title = temp.position_title;
								obj.staffid = temp.staffid;
								obj.title = "空闲";
								if(obj.is_rest == 1)
									obj.title = "休息";
								
								obj.isStaffid = false;
								if(tO.ls && tO.ls.length > 0)
								{
									obj.ls = tO.ls;
									obj.isFill = true;
								}
								else 
								{
									obj.ls = [];
									obj.isFill = false;
								}
								ary.push(obj);
							}
						}
						tempArr.push(ary);
					}
					this.weekDutyList = tempArr;
				}
			}
		},
		
		/*****按月加载数据*****/
		async getMonthYyBookFormList()
		{
			this.monDutyList = [];
			let url = config.YY0_YUYUE_BOOK_FORM_LS_M;
			let param = this.mSearch;
			let res = await this.$api({ url: url, data: param });
			if (!res) return;
			if(res.status == 1) 
			{
				if(!res.data)return;
				res = res.data;
				if(res.ls && res.ls.timelist)
				{
					let arr = [];
					let d = new Date(this.mSearch.stime);
					
					console.log(d);
					
					let tempArr = [];
					if(this.mSearch.pfrom == 0)
					{
						let day = d.getDay();
						let tt = d.getTime() - (day - 1) * 3600 * 24 * 1000;
						for(let i = 0; i<7; i++)
						{
							let t = new Date(tt + i * 3600 * 24 * 1000);
							let w = util.getWeekDay(t);
							let obj = {};
							obj.title = w;
							arr.push(obj);
						}
						tempArr.push(arr);
					}
					let leftArr = [];
					
					//计算第一行要空多少格
					let y = String(d.getFullYear());
					let m = d.getMonth() + 1 < 10 ? String( "0" + (d.getMonth() + 1)) : String(d.getMonth());
					let tt = y + "-" + m + "-01"; //每个月1号
					let day = new Date(tt).getDay();
					let leftLen = 0;
					if(day == 0)
					{
						leftLen = 6 ;
					}
					else
					{
						leftLen = day - 1;
					}
					for(let i = 0; i < leftLen; i++)
					{
						leftArr.push({}); //第一行占位符
					}
					
					let timeList =  res.ls.timelist;
					let  idx = leftLen;
					for(let k in timeList)
					{
						let mod = idx % 7;
						if(mod == 0)
						{
							let tJ = JSON.parse(JSON.stringify(leftArr))
							tempArr.push(tJ);
							leftArr = [];
						}
						let obj = {};
						obj.title = Number(String(k).substr(4,2));
						if(timeList[k])
						{
							obj.ls = timeList[k];
							obj.isFill = true;
						}
						else
						{
							obj.ls = [];
							obj.isFill = false;
						}
						leftArr.push(obj);
						idx ++;
					}
					
					//计算最后一行要空多少格
					let year = d.getFullYear(); //每月最后一天
					let month = d.getMonth()+1;
					let dd = new Date(year, month, 0);
					let dayNums =  dd.getDate(day);
					let rDay =  new Date(d.getTime() + ((dayNums - 1) * 3600 * 24 * 1000)).getDay(); //
					
					if(rDay > 0)
					{
						for(let i = rDay; i < 7; i++)
						{
							leftArr.push({}); //占位符
						}
					}
					tempArr.push(leftArr);
					this.monDutyList = tempArr;
				}
			}
		},

        //加载更多
        loadMoreDate() {
            this.search.pfrom = this.pageNo * this.search.pnum;
            this.getBookFormList(this.hourList);
        },

        /****点击,或长按事件处理****/
        clickItem(items,isFill = false) {
			console.log(items);
			if(items.cancel_act == 2) return; //休息不能预约
			if(items.is_rest == 1)return;//休息不能预约
			let obj = JSON.parse(JSON.stringify(items));
			obj.id = obj.staffid;
			console.log(obj);
			if(this.timeType  == 1)
			{
				obj.timestr = this.search.timestr;
			}
			if(this.timeType == 2 || this.timeType == 3)
			{
				obj.timestr = items.timestr;
				obj.isFill = isFill;
			}
			
			console.log("obj===:",obj);
			this.$emit("actions", obj);
        },
		
		/****点击菜单处理*****/
		menuAct(data)
		{
			console.log("menuAct():data=:",data)
			let that = this;
			if(data.act == 1) //编辑排班
			{
				let obj = JSON.parse(JSON.stringify(data.items));
				obj.id = obj.staffid;
				obj.isStaffid = true;
				obj.timestr = this.search.timestr;
				this.$emit("actions", obj);
			}
			else if(data.act == 2) //更换服务人
			{
				let obj = {};
				let lItem = {};
				lItem.positionname = data.items.position_title;
				lItem.id = data.items.staffid;
				lItem.name = data.items.title;
				obj.back = changeServer;
				obj.list = [lItem];
				obj.selectType = "2";
				this.$refs.popServiceSelect.initData(obj);
			}
			else if(data.act == 3) //移除服务人
			{
				if(this.timeType == 1)
				{
					this.deleteDuty(data.items.duty_id,data.index);
				}
				else if(this.timeType == 2)
				{
					this.deleteDuty(data.items.staffid,data.index);
				}
				
			}
			else if(data.act == 4) //取消预约
			{
				this.cancelBookId(data.items.bookid,data.index,data.idx);
			}
			else if(data.act == 5) //客户信息
			{
				let cInfo = data.items.customer_info;
				console.log("cInfo===:",cInfo);
				if(cInfo && cInfo.name)
					this.goProjectCustomer(cInfo.name);
			}
			else if(data.act == 6) //客户开单
			{
				let cInfo = data.items.customer_info;
				if(cInfo && cInfo.customerid)
					this.projectBill(cInfo.customerid);
			}
			else if(data.act == 7 || data.act == 8)
			{
				this.restAndWork(data.items);
			}
			
			/****更换服务人***/
			async function changeServer(obj)
			{
				console.log("changeServer():",data);
				let url = config.YY0_YUYUE_DUTY_CHANGE_STAFF;
				let param = {};
				if(that.timeType == 1)//按日更换服务人
				{
					param.duty_id = data.items.duty_id;
					param.staffid = obj.id;
				}
				else if(that.timeType == 2) //按周更换服务人
				{
					url = config.YY0_YUYUE_DUTY_CHANGE_STAFF_W;
					param.staffid = data.items.staffid;
					param.staffid_new = obj.id;
					param.s_time = that.wSearch.stime ;
					param.d_time = that.wSearch.dtime;
				}
				let res = await that.$api({ url: url, data: param});
				if(!res)return;
				if(res.status == 1)
				{
					if(that.timeType == 1)
					{
						for(let i = 0;  i< that.dutyHourList[data.index].length; i++)
						{
							if(i == 0)
							{
								that.dutyHourList[data.index][i].title = obj.name;
							}
							that.dutyHourList[data.index][i].avatar = obj.avatar;
							that.dutyHourList[data.index][i].cellphone = obj.cellphone;
							that.dutyHourList[data.index][i].name = obj.name;
							that.dutyHourList[data.index][i].position_title = obj.positionname;
							that.dutyHourList[data.index][i].staffid = obj.id;
						}
					}
					else if(that.timeType == 2)
					{
						for(let i = 0;  i< that.weekDutyList[data.index].length; i++)
						{
							if(i == 0)
							{
								that.weekDutyList[data.index][i].title = obj.name;
							}
							that.weekDutyList[data.index][i].avatar = obj.avatar;
							that.weekDutyList[data.index][i].cellphone = obj.cellphone;
							that.weekDutyList[data.index][i].name = obj.name;
							that.weekDutyList[data.index][i].position_title = obj.positionname;
							that.weekDutyList[data.index][i].staffid = obj.id;
						}
					}
					that.$msg({ title: "操作成功!" });
				}
			}
		},
		
		/*****删除成员*****/
		deleteDuty(id,index)
		{
			let that = this;
			let msg = "是否要移除该成员?";
			uni.showModal({
			    title: "提示",
			    content: msg,
			    success(res) {
			        if (res.confirm) {
			            delDuty();
			        }
			    },
			});
			
			async function delDuty()
			{
				let url = config.YY0_YUYUE_DUTY_DELETE;
				let param = {};
				if(that.timeType == 1)
				{
					param.duty_id = id;
				}
				else if(that.timeType == 2)
				{
					url = config.YY0_YUYUE_DUTY_DELETE_W;
					param.staffid = id;
					param.s_time = that.wSearch.stime;
					param.d_time = that.wSearch.dtime;
				}
				let res = await that.$api({ url: url, data: param});
				if(!res)return;
				if(res.status == 1)
				{
					if(that.timeType == 1)
					{
						that.dutyHourList.splice(index,1);
					}
					else if(that.timeType == 2)
					{
						that.weekDutyList.splice(index,1);
					}
					that.$msg({ title: "删除成功!" });
				}
			}
		},
		
		/****取消该预约****/
		cancelBookId(id,index,idx)
		{
			let that = this;
			let msg = "是否要取消该预约?";
			uni.showModal({
			    title: "提示",
			    content: msg,
			    success(res) {
			        if (res.confirm) {
			            canBook();
			        }
			    },
			});
			
			async function canBook()
			{
				let url = config.YY_YUYUE_BOOK_STATUS_ACT;
				let param = {
				    bookid: id,
				    act:"cancel",
				};
				let res = await that.$api({ url: url, data: param });
				if(!res)return;
				if(res.status == 1)
				{
					if(that.timeType == 1)//按月
					{
						let len = that.dutyHourList[index].length;
						for(let i = 1; i < len; i++)
						{
							let obj = that.dutyHourList[index][i];
							if(obj.bookid == id)
							{
								obj.cancel_act = 1;
								obj.title = "空闲";
								obj.duty_id = "";
								obj.bookid = "";
								obj.color = ""; //:"blue","gray" 填充颜色
								obj.customer_info = {};
								obj.isFill = false;
							}
						}
					}
					else if(that.timeType == 2)//按周
					{
						let len = that.weekDutyList[index][idx].ls.length;
						for(let i = 0; i < len; i++)
						{
							if(id == that.weekDutyList[index][idx].ls[i].bookid)
							{
								that.weekDutyList[index][idx].ls.splice(i,1);
							}
						}
						if(that.weekDutyList[index][idx].ls.length == 0)
						{
							that.weekDutyList[index][idx].isFill = false;
						}
					}
					else if(that.timeType == 3)//按月
					{
						let len = that.monDutyList[index][idx].ls.length;
						for(let i = 0; i < len; i++)
						{
							if(id == that.monDutyList[index][idx].ls[i].bookid)
							{
								that.monDutyList[index][idx].ls.splice(i,1);
							}
						}
						if(that.monDutyList[index][idx].ls.length == 0)
						{
							that.monDutyList[index][idx].isFill = false;
						}
					}
					that.$msg({ title: "操作成功!" });
				}
			}
		},
		
		
		/****休息，排班*****/
		restAndWork(items)
		{
			let that = this;
			if (!items.isFill) 
			{
			    //没有排班操作
				
			    let param = {};
				let msg = "";
				if(this.timeType == 1)
				{
					param.cancel_act = items.cancel_act;
					param.duty_id = items.duty_id;
					param.h_from = items.h_from;
					param.tlong = that.tLong;
					msg =
					    "是否要取消" +
					    items.name +
					    "在" +
					    items.h_from +
					    "的排班?";
					if (param.cancel_act == 2)
					    msg =
					        "是否要恢复" +
					        items.name +
					        "在" +
					        items.h_from +
					        "的排班?";
				}
				else
				{
					let dStr = Number(String(items.timestr).substr(2,2)) + "月" + Number(String(items.timestr).substr(4,2)) + "日";
					msg =
					    "是否要取消" +
					    items.name +
					    "在" +
					    dStr +
					    "的排班?";
					param.day = "20" + String(items.timestr).substr(0,2) + "-" + String(items.timestr).substr(2,2) + "-" + String(items.timestr).substr(4,2);
					param.staffid = items.staffid;
				}
			   
			    uni.showModal({
			        title: "提示",
			        content: msg,
			        success(res) {
			            if (res.confirm) {
			                cancelSchedul(param);
			            }
			        },
			    });
			}
			
			//取消,恢复排班
			async function cancelSchedul(data) {
				let url = config.YY0_DUTY_CANCEL;
				if(that.timeType == 2)
					url = config.YY0_YUYUE_DUTY_CANCEL_D;
				let res = await that.$api({ url: url, data: data });
				if (!res) return;
				if (res.status == 1) {
					if(that.timeType == 1)
					{
						if (data.cancel_act == 1) {
							items.title = "休息";
							items.cancel_act = 2;
						} else {
							items.title = "空闲";
							items.cancel_act = 1;
						}
					}
					else if(that.timeType == 2)
					{
						items.is_rest = 1;
						items.title = "休息";
					}
				}
			}
		},
		
		/****客户信息****/
		goProjectCustomer(name)
		{
			uni.$emit("project_customer",name);
		},
	
		/****开单***BENIN**/
		async projectBill(id)
		{
			let that = this;
			let param = {};
			let url = config.YY0_CART_INFO;
			let res = await this.$api({ url: url, data: param });
			if(!res)return;
			if (res.status == 1) 
			{
				console.log("res.data==================:",cInfo);
				if(!res.data)return;
				res = res.data;
				let cInfo = res.customer;
				console.log("cInfo==================:",cInfo);
				if(!cInfo || cInfo.id == id) //没有客户,相同客户id直接开单
				{
					// uni.$emit("write_project_bill");
					that.savaCartInfoCustomer(id);
					return;
				}
				else
				{
					let msg = "该操作将清空购物车内待开单服务,是否要继续?";
					uni.showModal({
					    title: "提示",
					    content: msg,
					    success(res) {
					        if (res.confirm) {
					            that.clearCartInfo(id);
					        }
					    },
					});
				}
			}
		},
		
		/****清空服务购物车***/
		async clearCartInfo(id)
		{
			let param = {allCount:0, empty:"1",totalMoney:0};
			let url = config.YY_ORDER_CART_SAVE;
			let res = await this.$api({ url: url, data: param });
			if(!res)return;
			if(res.status == 1)
			{
				this.savaCartInfoCustomer(id);
			}
		},
		
		/*****存储客户id，跳转开单****/
		async savaCartInfoCustomer(id)
		{
			let param = {allCount:0, customerid:id,totalMoney:0};
			let url = config.YY_ORDER_CART_SAVE;
			let res = await this.$api({ url: url, data: param });
			if(!res)return;
			if(res.status == 1)
			{
				uni.$emit("write_project_bill");
			}
		},
		/****开单***END**/
    },
};
</script>

<style lang="scss" scoped>

.comm-list::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 18px;
}
.comm-list::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
  background: #999999;
}
.comm-list::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
  border-radius: 10px;
  background: #ededed;
}
.appointment-overview {
    position: relative;
    padding-bottom: 100px;
	
	.a-o-tit
	{
		font-size: 16px;
		padding: 10px 20px;
		border-bottom: 1px solid #ececec;
	}
	
    .time-box {
        display: flex;
        justify-content: space-between;
		align-items: center;
        padding: 20px;
		.t-box
		{
			display: flex;
			align-items: center;
			.cur-time
			{
				margin-left: 20px;
				border: solid #3388FF 1px;
				border-radius: 4px;
				padding: 4px 20px ;
				color: #3388FF;
				cursor: pointer;
			}
		}
        .time-lb-txt {
            font-size: 13px;
            color: #666;
            padding: 10px 20px 10px 0px;
            cursor: pointer;
			
        }
		.time-lb-select
		{
			color: #3388FF;
		}

        .time-txt {
            color: #333;
            font-weight: bold;
            font-size: 14px;
        }
		
		.w-d-p-box
		{
			position: relative;
			.w-d-p
			{
				width: 240px;
			}
			.show-week
			{
				position: absolute;
				pointer-events: none;
				background-color: #FFF;
				height: 30px;
				width: 180px;
				left: 31px;
				top:5px;
				line-height: 29px;
				font-size: 13px;
				color: #666;
			}
			.show-week-null
			{
				color: #AAA;
			}
		}
		
		.flag-g
		{
			display: flex;
			align-items: center;
			.f-r-t
			{
				display: flex;
				padding-left: 20px;
				.rect
				{
					height: 12px;
					width: 12px;
					border: 1px solid #333;
					margin-top: 4px;
				}
				
				.rect-blue
				{
					border: 1px solid #3388FF;
					background-color: #3388FF;
				}
				
				.txt-dfw
				{
					border: 1px solid #3388FF;
					background-color: #3388FF;
				}
				
				.rect-hs
				{
					border: 1px solid #CCC;
					background-color: #CCC;
				}
				
				.txt
				{
					color: #666;
					padding-left: 4px;
				}
				
				.txt-xx
				{
					border: 1px solid #f2f2f2;
					background-color: #f2f2f2;
				}
				
				.txt-kx
				{
					border: 1px solid #CCC;
					background-color: #FFF;
				}
				
				.txt-c
				{
					border: 1px solid #EEE;
					background-color: #EEE;
				}
			}
		}
    }
    .a-l-box {
        width: calc(100% - 40px) ;
		padding: 0px 20px 20px 20px;
		position: relative;

		.soll-box{
			width: calc(100% - 40px) ;
			display: flex;
			flex-wrap: wrap;
			overflow-x: auto;
			position: absolute;
			left: 20px;
			top: 0;
		}
        .list-box {
            border: 1px solid #ccc;
		
            .d-t-box {
                display: flex;
                border-bottom: .1px solid #ccc;
                .item , .tb-item ,.m-tb-item
				{
                    padding: 10px;
                    text-align: center;
                    border-right: 1px solid #ccc;
                    flex: 1;
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    align-items: center;
					position: relative;
				    width: 100%;
					&.w-item{
					width: 100px;
				}
					.line
					{
						position: absolute;
						height: 1px;
						width: 108px;
						border-bottom: 1px solid #ccc;
						transform: rotate(21deg);
						top: 19px;
					}
					.t-txt
					{
						position: absolute;
						right: 10px;
						top: 3px;
					}
					.s-txt
					{
						position: absolute;
						left: 10px;
						bottom : 3px;
					}
					
					.d-work-box
					{
						width: 100%;
						height: 100%;
						.el-drop-box-d
						{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							height: 100%;
							.el-dropdown-link
							{
								width: calc(100% - 6px);
								.el-drop-txt
								{
									width: 100%;
								}
								.el-drop-txt-p
								{
									padding: 0 3px;
								}
								
								.el-drop-txt-min-w
								{
									opacity: 0;
								}
								
								.el-drop-txt-rest
								{
									 color: #a2a2a2;
									 background-color: #f2f2f2;
								}
								
								.item-s-b {
								    color: #fff;
								    background-color: #3388ff;
								}
								
								.item-s-g-dfw
								{
									color: #FFF;
									background-color: #3388FF;
								}
								
								.item-s-g {
								    color: #5d5d5d;
								    background-color: #eee;
								}
								
								.f-text-center
								{
									text-align: center;
								}
							}
							
						}
					}
                }
			
				.item:first-child, .tb-item:first-child
				{
					max-width: 80px !important;
					min-width: 80px !important;
				}
				
                .item:last-child , .tb-item:last-child,.m-tb-item:last-child
				{
                    border-right: none;
                }
				
                .item-s-b:hover,
                .item-s-g:hover {
                    opacity: 0.7;
                }
				
				.tb-item 
				{
					display: flex;
					flex-direction: column;
					text-align: left;
					.ls-item-el
					{
						width: calc(100% - 6px) ;
						padding: 1px 3px;
						text-align: left;
						.el-drop-box
						{
							width: 100%;
							color: #FFF;
							background-color: #3388FF;
						}
						
						.el-drop-txt-p
						{
							padding: 0 3px;
						}
						
						.item-s-g-dfw
						{
							color: #FFF;
							background-color: #3388FF;
						}
						
						.item-s-g {
							color: #5d5d5d;
							background-color: #eee;
						}
					}
				}
				.m-tb-item
				{
					min-height:60px;
					display: flex;
					flex-direction: column;
					text-align: left;
					position: relative;
					width : 100%;
					
					.date-txt-box
					{
						width : 100%;
						.date-txt
						{
							position: absolute;
							left: 3px;
							top: 3px;
						}
						.ls-box
						{
							width : calc(100% - 18px)  ;
							margin:0px 9px;
							.el-drop-box
							{
								width: 100%;
								.el-dropdown-link
								{
									width: 100%;
									.el-drop-txt
									{
										width: 100%;
										background-color: #3388FF;
										color: #FFF;
										margin: 1px 0;
										padding:  0px 4px;
									}
									.item-s-g-dfw 
									{
										color: #FFF;
										background-color: #3388FF;
									}
									
									.item-s-g {
										color: #5d5d5d;
										background-color: #eee;
									}
								}
							
							}
						}
						
					}
				}
            }
            .d-t-box:last-child {
                border-bottom: none;
            }
        }
        .more-btn {
			width: 100%;
            color: #3388ff;
            cursor: pointer;
            padding: 10px 0;
            text-align: center;
			
	
        }
        .more-btn:hover {
            opacity: 0.7;
        }
    }

    .but-box {
        position: fixed;
        left: 72px;
        bottom: 0;
        width: calc(100% - 72px);
        height: 60px;
        border-top: 1px #e8dcdc solid;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #fff;
        .but {
            width: 20%;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
            &.but1 {
                background: #3388ff;
            }
            &.but2 {
                background: #00c569;
            }
            &.but3 {
                background: #fec107;
            }
            &:hover {
                opacity: 0.8;
            }
        }
    }
}
</style>